import React, {forwardRef, useEffect, useImperativeHandle, useState} from "react";

import {Form, Input, Button, Upload, Modal, message, Tag, Avatar} from 'antd';
import {FileImageOutlined} from '@ant-design/icons';
import {getToken} from "@/utils/auth";
import {editUser} from '@/api/userList'
import './userList.less'

const FormPop = forwardRef((props, ref) => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [form] = Form.useForm();

    useImperativeHandle(ref, () => ({
        open
    }))
    //确定
    const handleOk = (value) => {
        console.log(form)
        editUser(form).then(res => {
            if (res.code === 200) {
                message.success('上传成功')
            }
        })
    };
    //取消
    const handleCancel = () => {
        setIsModalVisible(false)
    };
    //开启
    const open = (id) => {
        form.uid = id;
        setIsModalVisible(true)
    }

    const uploadChange = ({file}) => {
        console.log(file)
        if (file.status === 'error') {
            message.error('上传失败')
        } else if (file.status === 'done') {
            if (file.response.code === 200) {
                form.setFieldsValue({
                    headUrl: file.response.imgs[0]
                })
                message.success('上传成功')
            } else {
                message.error('上传失败')
            }
        }
    }


    return (
        <Modal title="编辑用户" visible={isModalVisible} onCancel={handleCancel}
               onOk={() => {
                   form.validateFields().then(res => {
                       console.log(res)
                       handleOk(res)
                   })
               }}
        >
            <Form
                form={form}
                name="basic"
                labelCol={{span: 4}}
                initialValues={{
                    uid: null,
                    userName: null,
                    oldPassword: null,
                    password: null,
                    phone: null,
                    headUrl: null
                }}
            >
                <Form.Item
                    label="用户名"
                    name="userName"
                >
                    <Input/>
                </Form.Item>

                <Form.Item
                    label="旧密码"
                    name="oldPassword"

                >
                    <Input.Password/>
                </Form.Item>
                <Form.Item
                    label="新密码"
                    name="password"
                >
                    <Input.Password/>
                </Form.Item>
                <Form.Item
                    label="手机号"
                    name="phone"
                >
                    <Input/>
                </Form.Item>

                <Form.Item label="用户头像" name={'headUrl'}>
                    <Upload
                        accept={'.jpg,.png'}
                        name="image[]"
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="/api/upload/img"
                        onChange={uploadChange}
                        headers={{token: getToken()}}
                    >
                        {form.headUrl ? <Avatar shape="square" size={64}/>
                            : <FileImageOutlined className={'uploadIcon'}/>
                        }
                    </Upload>
                    <Tag color="orange">点我上传图片</Tag>
                </Form.Item>

            </Form>
        </Modal>
    )
})

export default FormPop
